<template>
  <!--  这里是页脚  -->
  <div class="footer">
    <div  style="width:1800px;margin: 0 auto;min-height:333px;">
      <div style="height:30px;"></div>
      <div v-show="this.$store.state.islogin" style="height: 80px;">
        <el-row :gutter="10">
          <el-col :span="3">
            <div>&nbsp;</div>
          </el-col>
          <el-col :span="13">
            <div style="text-align:left;">
              <strong style="font-size:18px;color:white;margin-bottom: 12px;">Valve 保密</strong>
              <br />
              <br />
              <span style="font-size:12px;color:gray;">本页含有 Valve 的机密信息，设有访问限制。
                您必须与 Valve 签订涵盖机密信息条款的保密协议和/或许可协议，方能使用和访问本页面。</span>
            </div>
          </el-col>
          <el-col :span="8">
            <div>&nbsp;</div>
          </el-col>
        </el-row>
      </div>

      <el-row :gutter="10">
        <el-col :span="3">
          <div>&nbsp;</div>
        </el-col>
        <el-col :span="6">
          <div class="imgitem">
            <img src="../assets/logo_steamworks.png" alt="" />
            <br/>
            Steamworks 是由 <a href="#">Valve</a> 打造的一套工具和服务，
            <div>&nbsp;</div>
            帮助您在 <a href="#">Steam</a> 上配置、管理和运营您的游戏。
            <div class="corporate">
              <a href="http://www.valvesoftware.com">
                <img style="max-width: 55px;margin-top: 30px;" src="https://partner.steamgames.com/public/images/valve_logo_white_small.png"></a>
              <span class="vr"></span><a href="https://store.steampowered.com/">
              <img style="max-width: 55px;margin-top: 30px;" src="https://partner.steamgames.com/public/images/steam_logo_white_small.png"></a>
            </div>
          </div>
        </el-col>
        <el-col :span="3">
          <div>
            <ul>
              <li class="liitem" style="color:gray;font-size:10px;">文献库</li>
              <li class="liitem"><a href="#">主页</a></li>
              <li class="liitem"><a href="#">入门指南</a></li>
              <li class="liitem"><a href="#">商店状态</a></li>
              <li class="liitem"><a href="#">功能</a></li>
              <li class="liitem"><a href="#">财务</a></li>
              <li class="liitem"><a href="#">销售与市场营销</a></li>
              <li class="liitem"><a href="#">Steamworks SDK</a></li>
              <li class="liitem"><a href="#">网吧许可</a></li>
              <li class="liitem"><a href="#">Steam VR</a></li>
            </ul>
          </div>
        </el-col>
        <el-col :span="3">
          <div>
            <ul>
              <li class="liitem" style="color:gray;font-size:10px;">资源</li>
              <li class="liitem"><a href="#">Steam VR</a></li>
              <li class="liitem"><a href="#">Steam 网吧计划</a></li>
              <li class="liitem"><a href="#">Steamworks 讨论区</a></li>
              <li class="liitem"><a href="#">Steamworks 视频教程</a></li>
              <li class="liitem" style="margin-top: 15px;"><el-button type="primary" style="width:100%;height:40px;">联系客服</el-button></li>
            </ul>
          </div>
        </el-col>
        <el-col :span="3">
          <div>
            <ul>
              <li class="liitem" style="color:gray;font-size:10px;">新闻与更新</li>
              <li class="liitem"><a href="#">Steamkworks 博客</a></li>
              <li class="liitem"><a href="#">Steam 博客</a></li>
              <li class="liitem"><a href="#">Steam VR 博客</a></li>
            </ul>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  name: "Bottomnav",
  data(){
    return {
      msg: "这是主页",
      islogin : '',
      activeIndex: '1',
      username: '测试测试'
    }
  },
  created(){
    console.log('底部页面被创建');
    console.log(this.$store.state.islogin,'vuex状态')
    // axios({
    //   url:'http://123.207.32.32:8000/home/multidata'
    // }).then(res => {
    //   this.returnValue=res;
    //   console.log(this.returnValue)
    // })
  },
  methods: {
    handleCommand(command) {
      this.$message('click on item ' + command);
    }
  },
  computed: {

  },
  filters: {

  },
  watch: {

  },
  components: {

  }
}
</script>

<style scoped>

a {
  text-decoration: none;
}

.footer{
  background-color:#393e43;
  color:white;
}

.liitem{
  text-align: left;
  margin-top: 3px;
}
.liitem a{
  color:white;
  font-size: .82em;
}
.liitem a:hover{
  color:gray;
  text-decoration: #8dc5ca;
}

.imgitem{
  font-size: 14px;
  color:white;
  text-align:left;
}
.imgitem a{
  color:gray;
  text-decoration-line: initial ;
}
.imgitem a:hover{
  color:white;
  text-decoration: #8dc5ca;
}

.vr{
  border-right: 1px solid #fff;
  vertical-align: -3px;
  height: 22px;
  display: inline-block;
  width: 0;
  margin-left: 30px;
  margin-right: 25px;
}

</style>
